@import "../../../src/style/vars";
@import "../../../src/style/mixin";

.sidebar {
  height: calc(100vh - 60px);
  background: $--color-primary-light-9;
  border-right: 1px solid $--border-color-base;
  &__toggle {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    padding: 5px 0;
    background: $--color-primary-light-7;
    cursor: pointer;
    color: $--color-primary-light-2;
    border-bottom: 1px solid $--color-primary-light-6;

    &:hover {
      background: $--color-primary-light-6;
    }
    .toggle--collapsed {
      transition: transform 0.3s;
      transform: rotate(90deg);
    }
    .toggle--expand {
      transition: transform 0.3s;
    }
  }
  &__nav {
    height: calc(100% - 31px);
    user-select: none;
    & > .el-scrollbar > .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    .el-menu {
      background: $--color-primary-light-9;
    }
    .el-menu-item:hover, .el-submenu .el-submenu__title:hover {
      background: $--color-primary-light-8;
    }
    .el-submenu.is-active .el-submenu__title, .el-submenu.is-active .el-submenu__title i {
      color: $--color-primary;
    }
    .el-menu-item.is-active {
      background: $--color-primary-light-8;
    }
    .el-menu-item-group__title {
      color: $--color-info;
    }
    .el-submenu {
      .el-menu {
        //background: $--color-success-lighter;
      }
    }
  }
}
